<template>
	<view class="container">
		<!--时间筛选器-->
		<view class="filter-section">
			<view class="filter-tabs">
				<view 
					class="filter-tab" 
					:class="{active: selectedPeriod === 'week'}"
					@click="selectedPeriod = 'week'"
				>
					<text class="tab-text">本周</text>
				</view>
				<view 
					class="filter-tab" 
					:class="{active: selectedPeriod === 'month'}"
					@click="selectedPeriod = 'month'"
				>
					<text class="tab-text">本月</text>
				</view>
				<view 
					class="filter-tab" 
					:class="{active: selectedPeriod === 'quarter'}"
					@click="selectedPeriod = 'quarter'"
				>
					<text class="tab-text">本季度</text>
				</view>
				<view 
					class="filter-tab" 
					:class="{active: selectedPeriod === 'year'}"
					@click="selectedPeriod = 'year'"
				>
					<text class="tab-text">本年</text>
				</view>
			</view>
		</view>
		
		<!--数据概览卡片-->
		<view class="overview-section">
			<view class="section-title">
				<text class="title-text">数据概览</text>
				<text class="subtitle-text">实时监控物料流转情况</text>
			</view>
			<view class="overview-grid">
				<view class="overview-card">
					<view class="overview-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
						<image src="/static/inbound.png" class="icon-img" />
					</view>
					<view class="overview-content">
						<text class="overview-number">{{overviewData.inbound}}</text>
						<text class="overview-label">入库数量</text>
						<view class="trend-container">
							<text class="overview-trend" :class="getTrendClass(overviewData.inboundTrend)">
								{{overviewData.inboundTrend > 0 ? '+' : ''}}{{overviewData.inboundTrend}}%
							</text>
							<text class="trend-period">较上期</text>
						</view>
					</view>
				</view>
				
				<view class="overview-card">
					<view class="overview-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
						<image src="/static/outbound.png" class="icon-img" />
					</view>
					<view class="overview-content">
						<text class="overview-number">{{overviewData.outbound}}</text>
						<text class="overview-label">出库数量</text>
						<view class="trend-container">
							<text class="overview-trend" :class="getTrendClass(overviewData.outboundTrend)">
								{{overviewData.outboundTrend > 0 ? '+' : ''}}{{overviewData.outboundTrend}}%
							</text>
							<text class="trend-period">较上期</text>
						</view>
					</view>
				</view>
				
				<view class="overview-card">
					<view class="overview-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
						<image src="/static/inventory.png" class="icon-img" />
					</view>
					<view class="overview-content">
						<text class="overview-number">{{overviewData.stock}}</text>
						<text class="overview-label">库存总量</text>
						<view class="trend-container">
							<text class="overview-trend" :class="getTrendClass(overviewData.stockTrend)">
								{{overviewData.stockTrend > 0 ? '+' : ''}}{{overviewData.stockTrend}}%
							</text>
							<text class="trend-period">较上期</text>
						</view>
					</view>
				</view>
				
				<view class="overview-card">
					<view class="overview-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
						<image src="/static/warn.png" class="icon-img" />
					</view>
					<view class="overview-content">
						<text class="overview-number">{{overviewData.lowStock}}</text>
						<text class="overview-label">低库存预警</text>
						<view class="trend-container">
							<text class="overview-trend" :class="getTrendClass(-overviewData.lowStockTrend)">
								{{overviewData.lowStockTrend > 0 ? '+' : ''}}{{overviewData.lowStockTrend}}%
							</text>
							<text class="trend-period">较上期</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!--图表分析区域-->
		<view class="charts-section">
			<!--入库出库趋势图-->
			<view class="chart-card">
				<view class="chart-header">
					<view class="chart-title-group">
						<text class="chart-title">入库出库趋势分析</text>
						<text class="chart-subtitle">物料流转趋势监控</text>
					</view>
					<view class="chart-legend">
						<view class="legend-item">
							<view class="legend-color" style="background: #667eea;"></view>
							<text class="legend-text">入库</text>
						</view>
						<view class="legend-item">
							<view class="legend-color" style="background: #f093fb;"></view>
							<text class="legend-text">出库</text>
						</view>
					</view>
				</view>
				<view class="chart-content">
					<view class="chart-bars">
						<view 
							class="chart-bar-group" 
							v-for="(item, index) in trendData" 
							:key="index"
						>
							<view class="chart-label">{{item.date}}</view>
							<view class="chart-bars-container">
								<view 
									class="chart-bar inbound-bar" 
									:style="{height: getBarHeight(item.inbound, maxValue)}"
								>
									<view class="bar-tooltip">{{item.inbound}}</view>
								</view>
								<view 
									class="chart-bar outbound-bar" 
									:style="{height: getBarHeight(item.outbound, maxValue)}"
								>
									<view class="bar-tooltip">{{item.outbound}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!--物料分类统计-->
			<view class="chart-card">
				<view class="chart-header">
					<view class="chart-title-group">
						<text class="chart-title">物料分类占比</text>
						<text class="chart-subtitle">库存结构分析</text>
					</view>
				</view>
				<view class="chart-content">
					<view class="pie-chart-container">
						<view class="pie-chart">
							<view class="pie-segment" style="transform: rotate(0deg); background: conic-gradient(#667eea 0deg 144deg, transparent 144deg);"></view>
							<view class="pie-segment" style="transform: rotate(144deg); background: conic-gradient(#4facfe 144deg 252deg, transparent 252deg);"></view>
							<view class="pie-segment" style="transform: rotate(252deg); background: conic-gradient(#fa709a 252deg 360deg, transparent 360deg);"></view>
							<view class="pie-center">
								<text class="pie-total">{{categoryTotal}}%</text>
								<text class="pie-label">总计</text>
							</view>
						</view>
						<view class="pie-legend">
							<view class="pie-legend-item">
								<view class="pie-legend-color" style="background: #667eea;"></view>
								<view class="pie-legend-content">
									<text class="pie-legend-text">工具类</text>
									<text class="pie-legend-percent">{{categoryData.tools}}%</text>
								</view>
							</view>
							<view class="pie-legend-item">
								<view class="pie-legend-color" style="background: #4facfe;"></view>
								<view class="pie-legend-content">
									<text class="pie-legend-text">配件类</text>
									<text class="pie-legend-percent">{{categoryData.parts}}%</text>
								</view>
							</view>
							<view class="pie-legend-item">
								<view class="pie-legend-color" style="background: #fa709a;"></view>
								<view class="pie-legend-content">
									<text class="pie-legend-text">材料类</text>
									<text class="pie-legend-percent">{{categoryData.materials}}%</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!--热门物料排行榜-->
		<view class="ranking-section">
			<view class="ranking-header">
				<view class="ranking-title-group">
					<text class="ranking-title">热门物料排行</text>
					<text class="ranking-subtitle">使用频率统计</text>
				</view>
				<view class="ranking-tabs">
					<view 
						class="ranking-tab" 
						:class="{active: selectedRanking === 'inbound'}"
						@click="selectedRanking = 'inbound'"
					>
						<text class="tab-text">入库排行</text>
					</view>
					<view 
						class="ranking-tab" 
						:class="{active: selectedRanking === 'outbound'}"
						@click="selectedRanking = 'outbound'"
					>
						<text class="tab-text">出库排行</text>
					</view>
				</view>
			</view>
			
			<view class="ranking-list">
				<view 
					class="ranking-item" 
					v-for="(item, index) in rankingData" 
					:key="index"
				>
					<view class="ranking-rank" :class="getRankClass(index + 1)">
						<text class="rank-number">{{index + 1}}</text>
					</view>
					<view class="ranking-info">
						<text class="ranking-name">{{item.name}}</text>
						<text class="ranking-code">编码：{{item.code}}</text>
					</view>
					<view class="ranking-value">
						<text class="ranking-number">{{item.value}}</text>
						<text class="ranking-unit">{{item.unit}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	
	// 声明uni全局变量类型
	declare const uni: any;
	
	const selectedPeriod = ref('month');
	const selectedRanking = ref('inbound');
	
	// 当前日期
	const currentDate = computed(() => {
		const now = new Date();
		return `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
	});
	
	// 概览数据
	const overviewData = ref({
		inbound: 1234,
		inboundTrend: 12.5,
		outbound: 987,
		outboundTrend: -5.2,
		stock: 5678,
		stockTrend: 8.3,
		lowStock: 23,
		lowStockTrend: -15.6
	});
	
	// 趋势数据
	const trendData = ref([
		{ date: '1月', inbound: 120, outbound: 95 },
		{ date: '2月', inbound: 135, outbound: 110 },
		{ date: '3月', inbound: 98, outbound: 125 },
		{ date: '4月', inbound: 145, outbound: 88 },
		{ date: '5月', inbound: 112, outbound: 102 },
		{ date: '6月', inbound: 156, outbound: 134 }
	]);
	
	// 分类数据
	const categoryData = ref({
		tools: 40,
		parts: 30,
		materials: 30
	});
	
	// 排行榜数据
	const rankingData = ref([
		{ name: '螺丝刀套装', code: 'SD001', value: 156, unit: '套' },
		{ name: '轴承', code: 'ZC002', value: 89, unit: '个' },
		{ name: '润滑油', code: 'RHY003', value: 67, unit: '瓶' },
		{ name: '扳手', code: 'BS004', value: 45, unit: '把' },
		{ name: '密封圈', code: 'MFQ005', value: 34, unit: '个' }
	]);
	
	// 计算最大值用于图表高度
	const maxValue = computed(() => {
		return Math.max(...trendData.value.map(item => Math.max(item.inbound, item.outbound)));
	});
	
	// 计算分类总数
	const categoryTotal = computed(() => {
		const values = Object.values(categoryData.value) as number[];
		return values.reduce((sum: number, value: number) => sum + value, 0);
	});
	
	const getTrendClass = (trend: number) => {
		return trend > 0 ? 'trend-up' : trend < 0 ? 'trend-down' : 'trend-stable';
	};
	
	const getBarHeight = (value: number, max: number) => {
		return (value / max * 120) + 'rpx';
	};
	
	const getRankClass = (rank: number) => {
		if (rank === 1) return 'rank-gold';
		if (rank === 2) return 'rank-silver';
		if (rank === 3) return 'rank-bronze';
		return 'rank-normal';
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	.filter-section {
		padding: 24rpx 32rpx;
		background: #fff;
		margin: 16rpx 24rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.filter-tabs {
		display: flex;
		background: #f1f5f9;
		border-radius: 16rpx;
		padding: 6rpx;
	}

	.filter-tab {
		flex: 1;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 12rpx;
		transition: all 0.3s ease;
	}

	.filter-tab.active {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
	}

	.tab-text {
		font-size: 28rpx;
		font-weight: 500;
		color: #64748b;
		transition: color 0.3s ease;
	}

	.filter-tab.active .tab-text {
		color: #fff;
	}

	.overview-section {
		padding: 0 24rpx;
		margin-bottom: 24rpx;
	}

	.section-title {
		margin-bottom: 24rpx;
		padding: 0 8rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: 600;
		color: #1e293b;
		display: block;
		margin-bottom: 8rpx;
	}

	.subtitle-text {
		font-size: 24rpx;
		color: #64748b;
	}

	.overview-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
	}

	.overview-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 28rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.overview-card:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.12);
	}

	.overview-icon {
		width: 88rpx;
		height: 88rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.icon-img {
		width: 52rpx;
		height: 52rpx;
		filter: brightness(0) invert(1);
	}

	.overview-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.overview-number {
		font-size: 36rpx;
		font-weight: 700;
		color: #1e293b;
		margin-bottom: 8rpx;
	}

	.overview-label {
		font-size: 26rpx;
		color: #64748b;
		margin-bottom: 12rpx;
	}

	.trend-container {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.overview-trend {
		font-size: 24rpx;
		font-weight: 600;
	}

	.trend-period {
		font-size: 22rpx;
		color: #94a3b8;
	}

	.trend-up {
		color: #10b981;
	}

	.trend-down {
		color: #ef4444;
	}

	.trend-stable {
		color: #6b7280;
	}

	.charts-section {
		padding: 0 24rpx;
		margin-bottom: 24rpx;
	}

	.chart-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 32rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
	}

	.chart-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 32rpx;
	}

	.chart-title-group {
		flex: 1;
	}

	.chart-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1e293b;
		display: block;
		margin-bottom: 8rpx;
	}

	.chart-subtitle {
		font-size: 24rpx;
		color: #64748b;
	}

	.chart-legend {
		display: flex;
		gap: 20rpx;
	}

	.legend-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.legend-color {
		width: 20rpx;
		height: 20rpx;
		border-radius: 6rpx;
	}

	.legend-text {
		font-size: 26rpx;
		color: #64748b;
		font-weight: 500;
	}

	.chart-content {
		height: 320rpx;
	}

	.chart-bars {
		display: flex;
		align-items: flex-end;
		justify-content: space-around;
		height: 100%;
		padding: 0 20rpx;
	}

	.chart-bar-group {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		position: relative;
	}

	.chart-label {
		font-size: 24rpx;
		color: #64748b;
		margin-bottom: 16rpx;
		font-weight: 500;
	}

	.chart-bars-container {
		display: flex;
		gap: 12rpx;
		align-items: flex-end;
		height: 140rpx;
		position: relative;
	}

	.chart-bar {
		width: 32rpx;
		border-radius: 6rpx 6rpx 0 0;
		min-height: 12rpx;
		position: relative;
		transition: all 0.3s ease;
	}

	.chart-bar:hover {
		transform: scaleY(1.05);
	}

	.inbound-bar {
		background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
	}

	.outbound-bar {
		background: linear-gradient(180deg, #f093fb 0%, #f5576c 100%);
	}

	.bar-tooltip {
		position: absolute;
		top: -40rpx;
		left: 50%;
		transform: translateX(-50%);
		background: #1e293b;
		color: #fff;
		padding: 8rpx 12rpx;
		border-radius: 8rpx;
		font-size: 20rpx;
		opacity: 0;
		transition: opacity 0.3s ease;
		white-space: nowrap;
	}

	.chart-bar:hover .bar-tooltip {
		opacity: 1;
	}

	.pie-chart-container {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.pie-chart {
		position: relative;
		width: 240rpx;
		height: 240rpx;
	}

	.pie-segment {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.pie-center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		justify-content: center;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.pie-total {
		font-size: 28rpx;
		font-weight: 700;
		color: #1e293b;
	}

	.pie-label {
		font-size: 22rpx;
		color: #64748b;
	}

	.pie-legend {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		flex: 1;
		margin-left: 40rpx;
	}

	.pie-legend-item {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.pie-legend-color {
		width: 24rpx;
		height: 24rpx;
		border-radius: 6rpx;
		flex-shrink: 0;
	}

	.pie-legend-content {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pie-legend-text {
		font-size: 28rpx;
		color: #1e293b;
		font-weight: 500;
	}

	.pie-legend-percent {
		font-size: 26rpx;
		color: #64748b;
		font-weight: 600;
	}

	.ranking-section {
		flex: 1;
		padding: 0 24rpx;
	}

	.ranking-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.ranking-title-group {
		flex: 1;
	}

	.ranking-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1e293b;
		display: block;
		margin-bottom: 8rpx;
	}

	.ranking-subtitle {
		font-size: 24rpx;
		color: #64748b;
	}

	.ranking-tabs {
		display: flex;
		background: #f1f5f9;
		border-radius: 12rpx;
		padding: 4rpx;
	}

	.ranking-tab {
		padding: 12rpx 20rpx;
		border-radius: 8rpx;
		transition: all 0.3s ease;
	}

	.ranking-tab.active {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
	}

	.ranking-tab .tab-text {
		font-size: 24rpx;
		color: #64748b;
		font-weight: 500;
	}

	.ranking-tab.active .tab-text {
		color: #fff;
	}

	.ranking-list {
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
	}

	.ranking-item {
		display: flex;
		align-items: center;
		padding: 28rpx 32rpx;
		border-bottom: 1rpx solid #f1f5f9;
		transition: background-color 0.3s ease;
	}

	.ranking-item:hover {
		background-color: #f8fafc;
	}

	.ranking-item:last-child {
		border-bottom: none;
	}

	.ranking-rank {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.rank-number {
		font-size: 28rpx;
		font-weight: 700;
	}

	.rank-gold {
		background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
		color: #fff;
	}

	.rank-silver {
		background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
		color: #fff;
	}

	.rank-bronze {
		background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
		color: #fff;
	}

	.rank-normal {
		background: #f1f5f9;
		color: #64748b;
	}

	.ranking-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.ranking-name {
		font-size: 30rpx;
		font-weight: 600;
		color: #1e293b;
		margin-bottom: 8rpx;
	}

	.ranking-code {
		font-size: 24rpx;
		color: #64748b;
	}

	.ranking-value {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.ranking-number {
		font-size: 32rpx;
		font-weight: 700;
		color: #667eea;
	}

	.ranking-unit {
		font-size: 24rpx;
		color: #64748b;
		margin-top: 4rpx;
	}
</style>